<template>
	<view class="out-box">
		<!-- 斜线 -->
		<view class="oblique-bar"></view>
		<view class="oblique-bar-two"></view>
		<!-- 内容 -->
		<view class="content">
			<!-- 账单明细按钮 -->
			<view class="account-detail">
				<view class="account-detail-text" @click="changeDate">
					{{state.date}}
				</view>
				<image src="../../static/watch.svg" @click="changeDate"></image>
			</view>
			<!-- 功能栏 -->
			<view class="account-able">
				<view class="account-able-left">
					<image class="img" :src="state.userImg"></image>
					<image class="icon" src="../../static/index/zhihuan.svg" mode=""></image>
					<image class="img" :src="state.userImgTwo"></image>
				</view>
				<view class="account-able-right">
					<image class="search" @click="goSearch" src="../../static/search.svg"></image>
				</view>
			</view>
			<!-- 总收支 -->
			<view class="allExpensesPay">
				<!-- 一定时间内的账单结余 -->
				<view class="surplus">
					<!-- 结余文字提示 -->
					<view class="surplus-textPoint">
						{{state.jieyuTitle}}
					</view>
					<!-- 结余金额 -->
					<view class="surplus-money" v-if="state.jieyu" :class="state.jieyu[0]=='-'?'':'greenColor'">
						{{state.jieyu[0]!=='-'?'':state.jieyu[0]}}￥{{state.jieyu[0]!=='-'?state.jieyu:state.jieyu.slice(1)}}
					</view>
				</view>
				<!-- 收入支出分开 -->
				<view class="expenses-receipts">
					<view class="expenses-receipts-item" v-for="item in state.expensePay" :key="item" v-if="state.expensePay.length>0">
						<view class="expenses-receipts-item-text">
							{{item.text}}
						</view>
						<view
							:class="item.id===1?'expenses-receipts-item-bar-expense':'expenses-receipts-item-bar-pay'">
						</view>
						<view class="expenses-receipts-item-number">
							￥{{item.number}}
						</view>
					</view>
				</view>
				<!-- 装饰杠 -->
				<view class="bar"></view>
				<!-- 消费预测 -->
				<view class="payForecast">
					消费预测
				</view>
			</view>
			<!-- 账单表单 -->
			<view class="form">
				<!-- 日期表单盒子 -->
				<view v-if="state.allData.length>0" class="form-dateBox" v-for="(databox,key) in state.dayArray"
					:key='databox'>
					<!-- 时间和单天收支情况 -->
					<view class="date-title">
						<!-- 日期 -->
						<view class="date-title-left">
							<!-- 日期 -->
							<view class="date-title-left-date">
								{{key.slice(5)}}
							</view>
						</view>
						<!-- 单天收支 -->
						<view class="date-title-right">
							{{dayMoney(databox)}}
						</view>
					</view>
					<!-- 单天收入与支出情况 -->
					<view class="form-dateBox-item" :class="state.mousedownBg == item?'mousedownBg':''"
						@click="goDetail(state.allData[item],item)" v-for="(item,key) in databox" :key='item'>
						<!-- 收支类型及备注 -->
						<view class="form-dateBox-item-type">
							<!-- 收支类型图片 -->
							<view class="form-dateBox-item-type-image" :class="judgeColor(state.allData[item])">
								<image :src="judgeIcon(state.allData[item])"></image>
							</view>
							<!-- 收支类型文字及备注 -->
							<view class="form-dateBox-item-type-word">
								<!-- 收支类型文字 -->
								<view class="text">
									{{state.allData[item].type}}
								</view>
								<!-- 备注 -->
								<view class="note">
									{{state.allData[item].remark==null?'':state.allData[item].remark}}
								</view>
							</view>
						</view>
						<!-- 单笔收支金额 -->
						<view class="form-dateBox-item-money"
							:class="state.allData[item].billType == 1?'moneypay':'moneyexpense'">
							{{state.allData[item].billType == 1?'-':''}}￥{{state.allData[item].money}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 悬浮按钮 -->
		<view class="floatButton">
			<!-- 增加新账单 -->
			<view class="floatButton-itemOne" @click="addaccount" :class="state.btnBg==1?'buttonBg':''">
				<image src="../../static/add.svg"></image>
				add
			</view>
			<view class="floatButton-bar"></view>
			<!-- 扫描收据 -->
			<view class="floatButton-itemTwo" @click="scanaccount" :class="state.btnBg==2?'buttonBg':''">
				<image src="../../static/saomiao.svg"></image>
				scan
			</view>
		</view>
		<!-- 遮罩层 -->
		<u-overlay :show="state.hidenshow" z-index="4" @click="closeTime"></u-overlay>
		<!-- 切换时间组件 -->
		<view class="changeTime" :class="state.dateChange==true?'transTime':''">
			<dateSelect @getDate="getDate"></dateSelect>
		</view>
		<!-- 提示 -->
		<u-toast ref="utoast"></u-toast>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from "vue";
	import dateSelect from '../../components/dateselect/dateselect.vue'
	import {
		onReachBottom,
		onPullDownRefresh,
		onShow
	} from '@dcloudio/uni-app';
	// 数据源
	const state = reactive({
		message:'',
		sim:'',
		sam:'',
		allData: [],
		token: '',
		jieyu: '',
		expensePay: [],
		typeHash: {
			"百货": "departmentStore",
			"彩票": "lottery",
			"餐厅消费": "restaurantConsumption",
			"餐饮": "repast",
			"宠物": "pet",
			"服饰": "costume",
			"副食": "non-stapleFood",
			"工资": "salary",
			"工作": "work",
			"还款": "repayment",
			"红包": "redPacket",
			"家庭": "family",
			"交通": "traffic",
			"借出": "lend",
			"借入": "borrow",
			"捐赠": "donate",
			"快递费": "expressFee",
			"礼金": "cashGift",
			"礼品": "present",
			"理财": "moneyManagement",
			"零食": "snacks",
			"旅行": "travel",
			"美容": "Beauty",
			"年终奖": "yearEndBonus",
			"其他": "else",
			"汽车": "automobile",
			"日用": "ofEverydayUse",
			"社交": "socialContact",
			"食堂消费": "CanteenConsumption",
			"收款": "receipt",
			"书籍": "books",
			"蔬菜": "vegetable",
			"数码": "numericalCode",
			"水果": "fruits",
			"通讯": "communication",
			"维修": "maintain",
			"洗漱用品": "toiletry",
			"休闲": "leisure",
			"学习": "study",
			"烟酒": "tobaccoAndWine",
			"医疗": "medical",
			"饮品": "beverage",
			"娱乐": "recreation",
			"住房": "housing",
			"转账": "transferAccounts",
			"追星": "starchaser",
			"租金": "rental"
		},
		dayArray: {},
		page: 1,
		mousedownBg: -1,
		btnBg: 0,
		hidenshow: false,
		dateChange: false,
		userInfo: {},
		date: '时间选择',
		countId: 1,
		imageBase: '',
		jieyuTitle:'',
		userImg:'',
		userImgTwo:'https://img0.baidu.com/it/u=1821253856,3774998416&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
	})
	const utoast = ref(null)
	onMounted(() => {
		getAccount(1)
		// getUserInfo()
	})
	onShow(()=>{
		routerBe()
	})
	// 手动路由守卫，判断存不存在token，不存在则跳转回登入页面
	const routerBe = () => {
		uni.getStorage({
			key: 'Authorization',
			success: (res) => {
				// console.log(res)
			},
			fail: (res) => {
				if (res) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			}
		})
	}
	// 下拉刷新
	onPullDownRefresh(() => {
		state.date = '时间选择'
		state.allData = []
		routerBe()
		getAccount(1)
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 1000)
	})
	// 获取用户信息
	const getUserInfo = () => {
		uni.request({
			url: 'http://124.221.162.230:8888/user/getById',
			method: "POST",
			header: {
				Authorization: state.token
			},
			success: (res) => {
				// console.log(res)
				state.userInfo = res.data.data
				getMonthData()
				getUserImg()
			}
		})
	}
	// 获取用户头像
	const getUserImg = ()=>{
		uni.request({
			url:'http://124.221.162.230:8888/user/getImage',
			method:"POST",
			header: {
				Authorization: state.token
			},
			success: (imgData) => {
				state.userImg = imgData.data.data
			}
		})
		if(state.userInfo.relatedId!=null){
			uni.request({
				url:'http://124.221.162.230:8888/user/getImageById',
				method:"POST",
				header: {
					Authorization: state.token
				},
				data:{
					id:state.userInfo.relatedId
				},
				success: (res) => {
					state.userImgTwo = res.data.data
					// console.log(res)
				}
			})
		}
	}
	// 获取账单接口
	const getAccount = (pages) => {
		uni.getStorage({
			key: 'Authorization',
			success: (res) => {
				state.token = res.data
				uni.request({
					url: 'http://124.221.162.230:8888/bill/findBillByPageId',
					method: "POST",
					header: {
						Authorization: state.token
					},
					data: {
						page: pages,
						pageSize: 10
					},
					success: (res) => {
						// console.log(res.data.data.data)
						let arr = res.data.data.data
						state.allData = state.allData.concat(arr)
						sortTime(state.allData)
						getUserInfo()
					}
				})
			}
		})
	}
	// 关闭时间遮罩层
	const closeTime = () => {
		state.hidenshow = false
		state.dateChange = false
	}
	// 获取指定时间账单
	const getSomeAccount = (startDay, endDay) => {
		// console.log(state.userInfo.id)
		uni.request({
			url: 'http://124.221.162.230:8888/bill/findBillByAll',
			method: "POST",
			header: {
				Authorization: state.token
			},
			data: {
				id: state.userInfo.id,
				startTime: startDay,
				endTime: endDay,
				page: state.countId,
				pageSize: "1000"
			},
			success: (res) => {
				// console.log(res)
				state.allData = res.data.data.data;
				sortTime(state.allData)
			}
		})
	}
	// 对时间进行排序，并分组
	const sortTime = (arr) => {
		let timeObj = {}
		for (let i = 0; i < arr.length; i++) {
			let time = arr[i].time.slice(0, 10)
			if (!timeObj[time]) {
				timeObj[time] = [];
				timeObj[time].push(i);
			} else {
				timeObj[time].push(i);
			}
		}
		for (let key in timeObj) {
			state.dayArray = timeObj
		}
		// console.log(timeObj)
	}
	// 计算单天收支
	const dayMoney = (arr) => {
		let res = 0;
		for (let i = 0; i < arr.length; i++) {
			if (state.allData[arr[i]].billType === 1) {
				res = res - state.allData[arr[i]].money
			} else {
				res = res + state.allData[arr[i]].money
			}
		}
		if (res < 0) {
			return '-￥' + res.toString().slice(1)
		} else {
			return '￥' + res
		}
	}
	// 上拉刷新
	onReachBottom(() => {
		// state.page = state.page+1;
		// getAccount(state.page)
		// console.log(123)
		if (state.date === '时间选择') {
			uni.showLoading({
				title: '获取更多账单中...'
			})
			state.page = state.page + 1;
			getAccount(state.page)
			setTimeout(() => {
				uni.hideLoading()
			}, 200)
		} else {

		}
	})
	// 判断类型颜色函数
	const judgeColor = (obj) => {
		// console.log(obj)
		if (obj.type == '餐饮' || obj.type == '副食' || obj.type == '饮品' || obj.type == '蔬菜' || obj.type == '水果' || obj
			.type == '零食' || obj.type == '烟酒' || obj.type == '食堂消费' || obj.type == '餐厅消费') {
			return 'bgColorEat'
		} else if (obj.type == '日用' || obj.type == '百货' || obj.type == '服饰' || obj.type == '通讯' || obj.type == '家庭' ||
			obj.type == '洗漱用品' || obj.type == '维修' || obj.type == '快递费') {
			return 'bgColorHan'
		} else if (obj.type == '休闲' || obj.type == '娱乐' || obj.type == '彩票' || obj.type == '社交' || obj.type == '旅行' ||
			obj.type == '追星' || obj.type == '红包' || obj.type == '美容') {
			return 'bgColorVacation'
		} else if (obj.type == '工资' || obj.type == '租金' || obj.type == '理财' || obj.type == '年终奖' || obj.type == '借出' ||
			obj.type == '借入' || obj.type == '还款' || obj.type == '收款' || obj.type == '转账') {
			return 'bgColorMomey'
		} else if (obj.type == '书籍' || obj.type == '医疗' || obj.type == '学习' || obj.type == '礼金' || obj.type == '礼品' ||
			obj.type == '宠物' || obj.type == '汽车' || obj.type == '工作' || obj.type == '数码' || obj.type == '交通') {
			return 'bgColorSelf'
		} else if (obj.type == '住房' || obj.type == '捐赠' || obj.type == '其他') {
			return 'bgColorOther'
		}
	}
	// 判断返回图标路径
	const judgeIcon = (obj) => {
		// console.log(obj.type)
		let str = state.typeHash[obj.type]
		return `../../static/type/${str}.svg`
	}
	// 去到账单详情
	const goDetail = (obj, index) => {
		// console.log(obj,index)
		state.mousedownBg = index;
		setTimeout(() => {
			state.mousedownBg = -1;
			setTimeout(() => {
				uni.navigateTo({
					url: `/pages/accountDetail/accountDetail?obj=${JSON.stringify(obj)}&id=${state.userInfo.id}&name=${state.userInfo.name}`
				})
			}, 100)
		}, 100)
	}
	// 去添加账单
	const addaccount = () => {
		state.btnBg = 1;
		setTimeout(() => {
			state.btnBg = 0;
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/addAccount/addAccount?info={}&type=增加'
				})
			}, 100)
		}, 100)
	}
	// 打开相机扫描
	const scanaccount = () => {
		let tost = utoast;
		state.btnBg = 2;
		setTimeout(() => {
			state.btnBg = 0;
			setTimeout(() => {
				uni.chooseImage({
					count: 1,
					sourceType: ['camera', 'album'],
					success: (e) => {
						// console.log(e.tempFiles[0])
						let myFile = e.tempFilePaths;
						// console.log(myFile)
						getBase(myFile)
					},
					fail: (err) => {
					}
				})
			}, 100)
		}, 100)
	}
	// 把图片传给后端返回一个base64
	const getBase = (file) =>{
		let tost = utoast;
		uni.uploadFile({
			url:'http://124.221.162.230:8888/ocr/binary',
			header:{
				Authorization: state.token
			},
			filePath: file[0],
			name: 'file',
			success: (res) => {
				let data = JSON.parse(res.data)
				// let buffArr = baseToBlob(data.data)
				let buffArr = uni.base64ToArrayBuffer(data.data)
				cupAdd(buffArr)
			},
			fail: (err) => {
				tost.value.show({
					type: 'error',
					icon: false,
					title: '失败主题(带图标)',
					message: "解析失败",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
				})
			}
		})
	}
	// 切边增强
	const cupAdd = (buffArr) =>{
		let tost = utoast;
		uni.request({
			url: 'https://api.textin.com/ai/service/v1/crop_enhance_image',
			method: 'POST',
			header: {
				'Content-Type': 'application/json',
				'x-ti-app-id': 'a6dfc4e716171cfdd8a81071b41034ef',
				'x-ti-secret-code': 'dbea48d684bacd3358670ffd5bd2537a'
			},
			data: buffArr,
			success: (e) => {
				tost.value.show({
					type: 'success',
					title: '成功主题(带图标)',
					message: `识别成功`,
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
				})
				state.imageBase = e.data.result.image_list[0].image
				normal(e.data.result.image_list[0].image)
			},
			fail: (e) => {
				console.log()
			}
		})
	}
	// 通用扫描API调用
	const normal = (baseStr) => {
		// console.log(baseStr)
		// console.log(baseToBlob(baseStr))
		// let two = baseToBlob(baseStr)
		let two = uni.base64ToArrayBuffer(baseStr)
		// console.log(two)
		uni.request({
			url: 'https://api.textin.com/ai/service/v2/recognize',
			method: 'POST',
			header: {
				'Content-Type': 'application/octet-stream',
				'x-ti-app-id': 'a6dfc4e716171cfdd8a81071b41034ef',
				'x-ti-secret-code': 'dbea48d684bacd3358670ffd5bd2537a'
			},
			data: two,
			success: (res) => {
				// console.log('成功', res)
				getAffter(res.data)
			},
			fail: (err) => {
				console.log('失败2', err)
			}
		})
	}
	// 把通用扫描识别返回的结果丢给后端做处理
	const getAffter = (sdata)=>{
		// console.log(Sdata)
		sdata = JSON.stringify(sdata)
		// console.log(Sdata)
		uni.request({
			url:'http://124.221.162.230:8888/ocr/normal',
			method:'POST',
			header:{
				Authorization: state.token
			},
			data:sdata,
			success: (res) => {
				let obj = res.data.data
				obj = JSON.stringify(obj)
				if(res.data.code == 200){
					uni.navigateTo({
						url:`/pages/addAccount/addAccount?info=${obj}&type=扫描`
					})
				}else{
					sdata = JSON.parse(sdata);
					handleTrain(sdata)
				}
			},
			fail: (err) => {
			}
		})
	}
	// base64图片转成二进制
	const baseToBlob = (dataurl) => {
		const binaryString = window.atob(dataurl);
		const binaryLen = binaryString.length;
		const bytes = new Uint8Array(binaryLen);
		for (let i = 0; i < binaryLen; i++) {
			const ascii = binaryString.charCodeAt(i);
			bytes[i] = ascii;
		}
		return bytes.buffer;
	}
	// 处理不是通用图片而是火车票的时候
	const handleTrain = (obj) =>{
		let two = baseToBlob(state.imageBase);
		uni.request({
			url:'https://api.textin.com/robot/v1.0/api/train_ticket',
			method:'POST',
			header:{
				'Content-Type': 'application/octet-stream',
				'x-ti-app-id':'a6dfc4e716171cfdd8a81071b41034ef',
				'x-ti-secret-code':'dbea48d684bacd3358670ffd5bd2537a'
			},
			data:two,
			success: (res) => {
				getAffterTrain(res.data)
			},
			fail: (err) => {
			}
		})
	}
	// 把火车票的处理结果给后端
	const getAffterTrain = (tdata) =>{
		tdata = JSON.stringify(tdata);
		uni.request({
			url:'http://124.221.162.230:8888/ocr/train',
			method:'POST',
			header:{
				Authorization: state.token
			},
			data:tdata,
			success: (res) => {
				let obj = res.data.data
				obj = JSON.stringify(obj)
				if(res.data.code == 200){
					uni.navigateTo({
						url:`/pages/addAccount/addAccount?info=${obj}&type=扫描`
					})
				}else{
					console.log('图片格式有问题；或者不是微信账单，支付宝账单，或者不是火车票')
				}
			},
			fail: (err) => {
			}
		})
	}
	const error = (e) => {
		console.log(e)
	}
	// 去到搜索页
	const goSearch = () => {
		uni.navigateTo({
			url:'/pages/search/search'
		})
	}
	// 打开切换账单事件
	const changeDate = () => {
		state.hidenshow = true
		state.dateChange = true
	}
	// 子组件传值
	const getDate = (e) => {
		state.hidenshow = false
		state.dateChange = false
		let startTime = '';
		let endTime = ''
		if (e.length == 4) {
			startTime = e[0] + '-' + e[1] + '-' + e[2];
			endTime = e[0] + '-' + e[1] + '-' + e[3];
		} else if (e.length == 1) {
			startTime = e[0] + '-01-01';
			endTime = e[0] + '-12-31';
		}
		if(parseInt(endTime.split('-')[1])-parseInt(startTime.split('-')[1])>10){
			state.date = startTime.slice(0,4) + '年';
		}else{
			if(parseInt(endTime.split('-')[2])-parseInt(startTime.split('-')[2])>27){
				state.date = startTime.split('-').slice(0,2).join('.');
			}else{
				state.date = startTime.split('-').join('.') + '~' + endTime.split('-').join('.');
			}
		}
		getSomeAccount(startTime, endTime)
		getMonthData(startTime,endTime);
	}
	// 本月结余组件数据获取
	const getMonthData = (sTime,eTime) => {
		if(!sTime){
			state.jieyuTitle = '本月结余'
		}else{
			if(parseInt(eTime.split('-')[1])-parseInt(sTime.split('-')[1])>10){
				state.jieyuTitle = sTime.slice(0,4) + '年结余';
			}else{
				if(parseInt(eTime.split('-')[2])-parseInt(sTime.split('-')[2])>27){
					state.jieyuTitle = sTime.split('-').slice(0,2).join('.') + '结余';
				}else{
					state.jieyuTitle = sTime.split('-').join('.') + '~' + eTime.split('-').join('.') + '结余';
				}
			}
		}
		let date = new Date();
		let monthDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
		let year = date.getFullYear().toString();
		let month = (parseInt(date.getMonth()) + 1).toString();
		let start = year + '-' + month + '-' + '01';
		let end = year + '-' + month + '-' + monthDay[date.getMonth()].toString();
		uni.request({
			url: 'http://124.221.162.230:8888/bill/sumByApp',
			method: 'POST',
			header: {
				Authorization: state.token
			},
			data: {
				id: state.userInfo.id,
				startTime:sTime || start,
				endTime:eTime || end
			},
			success: (res) => {
				// console.log(res)
				let arr = [{text: '收入',id: 1,number: 0},{text: '支出',id: 2,number: 0}];
				arr[0].number = res.data.data[0]
				arr[1].number = res.data.data[1]
				state.expensePay = arr;
				state.jieyu = ((state.expensePay[0].number*10000-state.expensePay[1].number*10000)/10000).toString();
				// console.log(arr,state.jieyu)
			}
		})
	}
</script>

<style lang="less" scoped>
	.out-box {
		padding-top: var(--status-bar-height);
		box-sizing: border-box;
		width: 100vw;
		// height: calc(100vh - 100rpx);
		// max-height: 100vh;
		background: linear-gradient(to bottom, #F6FBFF, #ffffff);
		overflow: hidden;
		overflow-y: scroll;
		position: relative;
		// z-index: -2;

		.oblique-bar {
			position: absolute;
			top: 0;
			right: 100rpx;
			width: 100rpx;
			height: 700rpx;
			background: linear-gradient(to bottom, #ffffff, rgb(217, 242, 255));
			transform: translateY(-330rpx) rotateZ(-45deg);
		}

		.oblique-bar-two {
			position: absolute;
			top: 0;
			right: 40rpx;
			width: 100rpx;
			height: 700rpx;
			background: linear-gradient(to bottom, #F3F9FF, rgb(217, 242, 255));
			transform: rotateZ(-45deg);
		}

		.content {
			position: inherit;
			z-index: 2;
			width: 100vw;
			// height: 100%;
			padding-top: 30rpx;
			padding: 30rpx 40rpx 30rpx 40rpx;
			box-sizing: border-box;

			// overflow: hidden;
			// overflow-y: scroll;
			.account-detail {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.account-detail-text {
					font-size: 34rpx;
					margin-right: 12rpx;
					font-weight: 700;
				}

				image {
					margin-right: 20rpx;
					width: 60rpx;
					height: 60rpx;
				}
			}

			.account-able {
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				padding: 20rpx 0rpx 20rpx 0rpx;
				box-sizing: border-box;
				justify-content: space-between;

				.account-able-left {
					font-size: 34rpx;
					font-weight: 700;
					position: relative;
					.img{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
					.icon{
						position: absolute;
						left: 56rpx;
						width: 50rpx;
						z-index: 10;
						height: 50rpx;
						top: 30rpx;
					}
				}

				.account-able-right {
					.search {
						width: 52rpx;
						height: 52rpx;
					}
				}
			}

			.allExpensesPay {
				margin-top: 20rpx;
				width: 100%;
				height: 360rpx;
				border: 4rpx solid #000;
				border-radius: 26rpx;
				background: #ffffff;
				padding: 30rpx 36rpx 20rpx 36rpx;
				box-sizing: border-box;

				.surplus {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.surplus-textPoint {
						font-weight: 600;
					}

					.surplus-money {
						color: #e65656;
						font-size: 44rpx;
					}

					.greenColor {
						color: limegreen;
					}
				}

				.expenses-receipts {
					margin-top: 16rpx;

					.expenses-receipts-item {
						height: 40rpx;
						margin-top: 34rpx;
						display: grid;
						grid-template-columns: 0.7fr 4fr 1fr;
						grid-column-gap: 10rpx;
						font-size: 30rpx;

						.expenses-receipts-item-text {
							color: #ababab;
						}

						.expenses-receipts-item-bar-expense {
							background-color: #2193f6;
							border-radius: 20rpx;
						}

						.expenses-receipts-item-bar-pay {
							background-color: #2491f12e;
							border-radius: 20rpx;
						}
					}
				}

				.bar {
					margin-top: 30rpx;
					width: 100%;
					height: 4rpx;
					background-color: #000;
				}

				.payForecast {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 80rpx;
					font-size: 36rpx;
					font-weight: 700;
				}
			}

			.form {
				margin-top: 60rpx;

				.form-dateBox {
					background: #ffffff;
					border: 2rpx solid #E0E0E0;
					padding: 30rpx 0rpx 0rpx 0rpx;
					box-sizing: border-box;
					border-radius: 20rpx;
					margin-top: 30rpx;

					.date-title {
						padding: 0rpx 30rpx 0rpx 30rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.date-title-left {
							width: 260rpx;
							height: 40rpx;
							display: flex;
							align-items: center;
							// color: #ababab;
							color: black;
						}

						.date-title-right {
							color: #ababab;
						}
					}

					.form-dateBox-item {
						padding: 30rpx 30rpx 30rpx 30rpx;
						box-sizing: border-box;
						transition: all 0.1s;
						background-color: #ffffff;
						height: 110rpx;
						display: flex;
						border-bottom-left-radius: 20rpx;
						border-bottom-right-radius: 20rpx;
						align-items: center;
						justify-content: space-between;

						.form-dateBox-item-type {
							display: flex;
							align-items: center;
							height: 80rpx;

							.form-dateBox-item-type-image {
								height: 80rpx;
								width: 80rpx;
								border-radius: 50%;
								display: flex;
								align-items: center;
								justify-content: center;

								image {
									width: 50rpx;
									height: 50rpx;
								}
							}

							.bgColorMomey {
								background-color: #FFCCBC;
							}

							.bgColorEat {
								background-color: #FFF9C4;
							}

							.bgColorHan {
								background-color: #C5CAE9;
							}

							.bgColorVacation {
								background-color: #B3E5FC;
							}

							.bgColorSelf {
								background-color: #B39DDB;
							}

							.bgColorOther {
								background-color: #C8E6C9;
							}

							.form-dateBox-item-type-word {
								height: 80rpx;
								margin-left: 20rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;

								.text {
									font-size: 30rpx;
									font-weight: 700;
								}

								.note {
									font-size: 24rpx;
									color: #ababab;
								}
							}
						}

						.form-dateBox-item-money {
							font-size: 34rpx
						}

						.moneyexpense {
							color: limegreen;
						}

						.moneypay {
							color: #e65656;
						}
					}

					.mousedownBg {
						transition: all 0.1s;
						background-color: #f1f1f1;
					}
				}
			}
		}

		.content::-webkit-scrollbar {
			display: none;
			/* Chrome Safari */
		}

		.floatButton {
			width: 320rpx;
			height: 100rpx;
			border-radius: 50rpx;
			position: fixed;
			bottom: 20rpx;
			left: calc(50% - 150rpx);
			z-index: 3;
			display: flex;
			box-shadow: 0rpx 0rpx 2rpx 2rpx rgba(0, 0, 0, 0.3);

			.floatButton-itemOne {
				transition: all 0.1s;
				height: 100rpx;
				width: 160rpx;
				color: #F6FBFF;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				background-color: #2193f6;
				border-bottom-left-radius: 50rpx;
				border-top-left-radius: 50rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.floatButton-itemTwo {
				transition: all 0.1s;
				height: 100rpx;
				width: 160rpx;
				color: #F6FBFF;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				background-color: #2193f6;
				border-top-right-radius: 50rpx;
				border-bottom-right-radius: 50rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.floatButton-bar {
				height: 100rpx;
				width: 0.2rpx;
				background-color: rgba(135, 193, 251, 0.435);
			}

			.buttonBg {
				transition: all 0.1s;
				background-color: #166bb6;
			}
		}

		.changeTime {
			transition: all 0.5s;
			width: 100vw;
			height: 860rpx;
			background-color: #ffffff;
			position: fixed;
			bottom: -1400rpx;
			left: 0;
			z-index: 5;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			border-top: 2rpx solid #000;
		}

		.transTime {
			transition: all 0.5s;
			transform: translateY(-1400rpx);
		}
	}
</style>